<script setup lang="ts">
import { getConsultOrderDetailAPI } from '@/apis/consult'
import { OrderType } from '@/enums'
import type { ConsultOrderItem } from '@/types/consult'
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { formatConsultFlag, formatIllnessTime } from '@/utils/filter'
import { useCancelOrder, useDeleteOrder } from '@/composables'
const { cancelLoading, onCancelOrder } = useCancelOrder()
const { deleteLoading, onDeleteOrder } = useDeleteOrder(() => {
    // 跳转路由 问诊记录
    router.push('/user/consult')
})

import { useShowPre } from '@/composables/useShowPre'
import router from '@/router'
import { useClipboard } from '@vueuse/core'
import { showToast } from 'vant'
const { showPre } = useShowPre()
const item = ref<ConsultOrderItem>()
const route = useRoute()
onMounted(async () => {
    const res = await getConsultOrderDetailAPI(route.params.id as string)
    // console.log(res)
    item.value = res.data
})

const { copy, isSupported } = useClipboard()
const onCopy = async () => {
    if (!isSupported.value) return showToast('暂不支持复制')
    await copy(item.value?.orderNo || '')
    showToast('复制成功')
}
//控制抽屉组件的显示与隐藏
const show = ref(false)
</script>

<template>
    <div class="consult-detail-page" v-if="item">
        <cp-nav-bar title="问诊详情" />
        <div class="detail-head">
            <div class="text">
                <h3>图文问诊 {{ item.payment }} 元</h3>
                <span class="sta" :class="{
                    orange: item.status === OrderType.ConsultPay,
                    green: item.status === OrderType.ConsultChat
                }">{{ item.statusValue }}</span>
                <p class="tip">服务医生信息</p>
            </div>
            <div class="card">
                <img class="avatar" src="@/assets/avatar-doctor.svg" alt="" />
                <p class="doc">
                    <span>极速问诊</span>
                    <span>{{ item.docInfo?.name || '暂无医生' }}</span>
                </p>
                <van-icon name="arrow" />
            </div>
        </div>
        <div class="detail-patient">
            <van-cell-group :border="false">
                <van-cell title="患者信息"
                    :value="`${item?.patientInfo.name} | ${item?.patientInfo.genderValue} | ${item?.patientInfo.age}岁`" />
                <van-cell title="患病时长" :value="formatIllnessTime(item.illnessTime)" />
                <van-cell title="就诊情况" :value="formatConsultFlag(item.consultFlag)" />
                <van-cell title="病情描述" :label="item.illnessDesc" />
            </van-cell-group>
        </div>
        <div class="detail-order">
            <h3>订单信息</h3>
            <van-cell-group :border="false">
                <van-cell title="订单编号">
                    <template #value>
                        <span class="copy" @click="onCopy">复制</span>
                        {{ item.orderNo }}
                    </template>
                </van-cell>
                <van-cell title="创建时间" :value="item.createTime" />
                <van-cell title="应付款" :value="`￥${item.payment}`" />
                <van-cell title="优惠券" :value="`-￥${item.couponDeduction}`" />
                <van-cell title="积分抵扣" :value="`-￥${item.pointDeduction}`" />
                <van-cell title="实付款" :value="`￥${item.actualPayment}`" class="price" />
            </van-cell-group>
        </div>
        <!-- 待支付的时候显示 倒计时功能 -->
        <div class="detail-time" v-if="item.status === OrderType.ConsultPay">
            请在
            <van-count-down :time="item.countdown * 1000" />
            内完成支付，超时订单将取消
        </div>
        <!-- 待支付的按钮状态 -->
        <div class="detail-action van-hairline--top" v-if="item.status === OrderType.ConsultPay">
            <div class="price">
                <span>需付款</span>
                <span>￥{{ item.payment }}</span>
            </div>
            <van-button type="default" round :loading="cancelLoading" @click="onCancelOrder(item)">取消问诊</van-button>
            <van-button type="primary" round @click="show = true">继续支付</van-button>
        </div>
        <!-- 待接诊的按钮状态 -->
        <div class="detail-action van-hairline--top" v-if="item.status === OrderType.ConsultWait">
            <van-button type="default" round>取消问诊</van-button>
            <van-button type="primary" round :to="`room?orderId=${item.id}`">
                继续沟通
            </van-button>
        </div>
        <!-- 咨询中的按钮状态 -->
        <div class="detail-action van-hairline--top" v-if="item.status === OrderType.ConsultChat">
            <van-button type="default" round v-if="item.prescriptionId">
                查看处方
            </van-button>
            <van-button type="primary" round :to="`room?orderId=${item.id}`">
                继续沟通
            </van-button>
        </div>
        <!-- 已完成的按钮状态 -->
        <div class="detail-action van-hairline--top" v-if="item.status === OrderType.ConsultComplete">
            <ConsultMore :disabled="!item.prescriptionId" @on-show="showPre(item.prescriptionId)"
                @on-delete="onDeleteOrder(item)"></ConsultMore>
            <van-button type="default" round :to="`/room?orderId=${item.id}`">
                问诊记录
            </van-button>
            <van-button type="default" round v-if="item.evaluateId" :to="`/room?orderId=${item.id}`">
                查看评价
            </van-button>
            <van-button type="primary" round v-else :to="`/room?orderId=${item.id}`"> 写评价 </van-button>
        </div>
        <!-- 已取消的按钮状态 -->
        <div class="detail-action van-hairline--top" v-if="item.status === OrderType.ConsultCancel">
            <van-button type="default" round :loading="deleteLoading" @click="onDeleteOrder(item)">
                删除订单
            </van-button>
            <van-button type="primary" round to="/"> 咨询其他医生 </van-button>
        </div>
        <!-- 使用抽屉组件 -->
        <CpPaySheet v-model:show="show" :order-id="item?.id" :actual-payment="item.actualPayment"></CpPaySheet>
    </div>
    <div class="consult-detail-page" v-else>
        <cp-nav-bar title="问诊详情" />
        <van-skeleton title :row="4" style="margin-top: 30px" />
        <van-skeleton title :row="4" style="margin-top: 30px" />
    </div>
</template>

<style lang="scss" scoped>
.consult-detail-page {
    padding: 46px 0 110px 0;
}

.detail-head {
    height: 140px;
    position: relative;
    padding: 15px;

    &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 135px;
        background: linear-gradient(180deg,
                rgba(44, 181, 165, 0),
                rgba(44, 181, 165, 0.2));
        border-bottom-left-radius: 150px 20px;
        border-bottom-right-radius: 150px 20px;
    }

    padding: 15px;

    .text {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 10px 3px;

        .sta {
            color: var(--cp-tag);
            font-weight: 500;
            font-size: 16px;

            &.green {
                color: var(--cp-primary);
            }

            &.orange {
                color: #f2994a;
            }
        }

        .tip {
            width: 100%;
            color: var(--cp-text3);
            margin-top: 5px;
        }
    }

    .card {
        height: 74px;
        background-color: #fff;
        border-radius: 8px;
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 15px;
        box-shadow: 0px 0px 22px 0px rgba(229, 229, 229, 0.5);

        .avatar {
            width: 38px;
            height: 38px;
        }

        .doc {
            flex: 1;
            padding-left: 15px;

            >span {
                display: block;
                font-size: 16px;

                &:last-child {
                    font-size: 13px;
                    color: var(--cp-text3);
                }
            }
        }

        .van-icon {
            color: var(--cp-tip);
        }
    }
}

.detail-patient {
    &::after {
        content: '';
        display: block;
        height: 12px;
        background-color: var(--cp-bg);
    }
}

.detail-order {
    >h3 {
        padding: 10px 18px;
        font-weight: normal;
    }

    .copy {
        padding: 2px 10px;
        border: 1px solid var(--cp-primary);
        background-color: var(--cp-plain);
        color: var(--cp-primary);
        font-size: 12px;
        border-radius: 12px;
        margin-right: 10px;
    }

    :deep(.van-cell__title) {
        width: 70px;
        flex: none;
    }

    .price :deep(.van-cell__value) {
        font-size: 16px;
        color: var(--cp-price);
    }
}

.detail-action {
    height: 65px;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    background-color: #fff;
    justify-content: flex-end;
    padding: 0 15px;
    box-sizing: border-box;

    .price {
        flex: 1;

        >span:last-child {
            font-size: 18px;
            color: var(--cp-price);
            padding-left: 5px;
        }
    }

    .van-button {
        margin-left: 10px;
        padding-left: 17px;
        padding-right: 17px;
    }

    :deep(.van-button--default) {
        background-color: var(--cp-bg);
        color: var(--cp-text3);
    }
}

.van-cell {
    padding-left: 18px;
    padding-right: 18px;
}

.detail-time {
    position: fixed;
    left: 0;
    bottom: 65px;
    width: 100%;
    height: 44px;
    background-color: #fff7eb;
    text-align: center;
    line-height: 44px;
    font-size: 13px;
    color: #f2994a;

    .van-count-down {
        display: inline;
        color: #f2994a;
    }
}
</style>